<template>
  <!-- 全屏容器 -->
  <div class="container-login">
    <!-- 卡片 -->
    <el-card class="my-card">
      <img src="../../assets/logo_index.png" alt />
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon>
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="loginForm.code"
            placeholder="请输入验证码"
            style="width:240px;margin-right:8px;"
          ></el-input>
          <el-button>发送验证码</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox :value="true">我已阅读并同意用户协议和隐私条款</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button @click="login()" type="primary" style="width:100%">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import auth from '@/utils/auth'
export default {
  name: "app-login",
  data() {
    //自定义校验手机号的函数
    const checkMobile = (rule,value,callback)=>{
       // 进行校验 （1开头，第二位 3-9 数字，其余剩下9位数字）
       if(!/^1[3-9]\d{9}$/.test(value)){
         //校验失败
         callback(new Error('手机格式错误'))
       } else{
         //校验成功
         callback()
       }
    }
    return {
      loginForm: {
        mobile: '13911111111',
        code: '246810'
      },
      //表单对应的校验规则
      loginRules:{
        mobile:[
          //required 是否必填
          //message 错误提示
          //trigger 触发校验时机
          {required:true, message: '请输入手机号', trigger: 'blur'},
          //手机号格式校验没有提供，需要实现自定义校验
          {validator:checkMobile,trigger:'blur'}
        ],
        code:[
          {required:true, message: '请输入验证码', trigger: 'blur'},
          //len输入的内容必须是6位 min max 指定字符串的范围
          {len:6,message:'验证码6个字符',trigger:'blur'}
        ]
      }
    };
  },
  methods:{
    login () {
      //this.$refs.loginForm 拿到组件实例
      //this.$refs.loginForm.validate() 调用组件方法
      this.$refs.loginForm.validate((valid)=>{
        //valid 值true 校验成功
        if(valid){
          //进行登录
          this.$http.post(
            'http://ttapi.research.itcast.cn/mp/v1_0/authorizations',
            this.loginForm
            ).then(res=>{
              //响应报文对象（响应状态行，响应头，响应主体）
              auth.setUser(res.data.data)
              this.$router.push('/')
            }).catch(err=>{
              //提示手机号或验证码错误
              this.$message.error('手机号或验证码错误');
            })
        }
      })
    }
  }
};
</script>

<style scoped lang='less'>
.container-login {
  width: 100%;
  height: 100%;
  // background-color: rgb(214, 23, 23);
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../assets/1001.jpg) no-repeat center;
  background-size: cover;
}
.my-card {
  width: 400px;
  height: 350px;
  transform: translate(-50%, -65%);
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  border: rgba(0, 0, 0, 0.2);
  img {
    width: 200px;
    display: block;
    margin: 0 auto 20px;
  }
}
</style>